<template>
  <div>
    <el-button @click="$router.go(-1)">返回</el-button>
    <el-tabs v-model="formName" type="card" @tab-click="checkForm">
      <el-tab-pane label="疫情上报登记表" name="demo1"></el-tab-pane>
      <el-tab-pane label="大学生日常消费状况问卷表" name="demo2"></el-tab-pane>
      <el-tab-pane label="古诗词展示" name="demo3"></el-tab-pane>
      <el-tab-pane label="商品评价表单" name="demo4"></el-tab-pane>
    </el-tabs>
    <div class="demo" v-if="formJson">
      <FormGenerator :form-json="formJson" ref="formGenerator" />
      <div>
        <el-button type="primary" @click="getFormValue">
          获取数据
        </el-button>
        <!-- 查看JSON -->
<!--        <el-button type="success" @click="getFormJson">-->
<!--          查看JSON-->
<!--        </el-button>-->
      </div>
    </div>
    <!-- 表单数据框 -->
    <el-dialog :title="dialogTitle" :visible.sync="jsonDialog" top="5vh">
      <div style="max-height: 400px; overflow-y: scroll">
        <el-input type="textarea" autosize readonly v-model="jsonmsg">
        </el-input>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { demo1, demo2, demo3, demo4 } from "./formjson";
import FormGenerator from "@/components/FormGenerator"
export default {
  components: {
    FormGenerator
  },
  data() {
    return {
      formName: "demo1",
      formJson: demo1,
      dialogTitle: "",
      jsonDialog: false,
      jsonmsg: {}
    }
  },
  methods: {
    checkForm() {
      switch (this.formName) {
        case 'demo1': {
          this.formJson = demo1
          break
        }
        case 'demo2': {
          this.formJson = demo2
          break
        }
        case 'demo3': {
          this.formJson = demo3
          break
        }
        case 'demo4': {
          this.formJson = demo4
          break
        }
        default: {

        }
      }
    },
    getFormValue() {
      // 调用表单生成器的getFormVal方法获取表单数据
      this.$refs.formGenerator.getFormVal().then((data) => {
        this.dialogTitle = "表单数据";
        this.jsonDialog = true;
        this.jsonmsg = JSON.stringify(data, null, 1);
      });
    },
  }
}
</script>

<style scoped>
.demo {
  padding: 50px;
}
</style>
